<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>场景类型</title>
    <!-- 全局jq -->

    <!-- 引入文件需要和前面保持一致 -->

    <script th:href="@{/js/jquery.min.js}" src="/js/jquery.min.js"></script>
    <!-- table组件 -->
    <script
      th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.js}"
      src="/ajax/libs/bootstrap-table/bootstrap-table.min.js"
    ></script>
    <script
      th:href="@{/js/bootstrap.min.js}"
      src="/js/bootstrap.min.js"
    ></script>
    <script
      th:href="@{/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"
      src="/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"
    ></script>
    <script
      th:href="@{/ajax/libs/bootstrap-table/extensions/custom-view/bootstrap-table-custom-view.js}"
      src="/ajax/libs/bootstrap-table/extensions/custom-view/bootstrap-table-custom-view.js"
    ></script>

    <!-- <script src="/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js"></script> -->
    <!-- table样式 -->
    <link
      th:href="@{/ruoyi/css/ry-ui.css}"
      rel="stylesheet"
      href="/ruoyi/css/ry-ui.css"
    />
    <link
      th:href="@{/css/bootstrap.min.css}"
      rel="stylesheet"
      href="/css/bootstrap.min.css"
    />
    <!-- 树组件 -->
    <!-- <link rel="stylesheet" href="/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css">
	<script src="/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js"></script> -->
    <!-- 遮罩层 -->
    <script
      th:href="@{/ajax/libs/blockUI/jquery.blockUI.js}"
      src="/ajax/libs/blockUI/jquery.blockUI.js"
    ></script>
    <script
      th:href="@{/ajax/libs/iCheck/icheck.min.js}"
      src="/ajax/libs/iCheck/icheck.min.js"
    ></script>
    <script
      th:href="@{/ajax/libs/layer/layer.min.js}"
      src="/ajax/libs/layer/layer.min.js"
    ></script>
    <script
      th:href="@{/ajax/libs/layui/layui.min.js}"
      src="/ajax/libs/layui/layui.min.js"
    ></script>
    <script th:href="@{/ruoyi/js/ry-ui.js}" src="/ruoyi/js/ry-ui.js"></script>
    <!-- <script src="/ruoyi/js/common.js"></script> -->

    <!-- <link rel="stylesheet" href="/ajax/libs/jquery-layout/jquery.layout-latest.css">
	<script src="/ajax/libs/jquery-layout/jquery.layout-latest.js"></script> -->
    <!-- 表单验证插件 -->

    <script
      th:href="@{/ajax/libs/validate/jquery.validate.min.js}"
      src="/ajax/libs/validate/jquery.validate.min.js"
    ></script>
    <script
      th:href="@{/ajax/libs/validate/jquery.validate.extend.js}"
      src="/ajax/libs/validate/jquery.validate.extend.js"
    ></script>
    <script
      th:href="@{/ajax/libs/validate/messages_zh.js}"
      src="/ajax/libs/validate/messages_zh.js"
    ></script>
    <link
      th:href="@{/ajax/libs/layui/css/modules/laydate/default/laydate.css}"
      rel="stylesheet"
      href="/ajax/libs/layui/css/modules/laydate/default/laydate.css"
    />
    <link th:href="@{/css/layui.css}" rel="stylesheet" href="/css/layui.css" />
    <link th:href="@{/css/demo.css}" rel="stylesheet" href="/css/demo.css" />
    <link
      th:href="@{/css/treeTable.css}"
      rel="stylesheet"
      href="/css/treeTable.css"
    />
    <!-- 分页 -->
    <link
      rel="stylesheet"
      href="/css/font-awesome.min.css"
      th:href="@{/css/font-awesome.min.css}"
    />

    <script th:href="@{/js/layui.js}" src="/js/layui.js"></script>
    <script th:href="@{/js/treeTable.js}" src="/js/treeTable.js"></script>

    <link
      rel="stylesheet"
      th:href="@{/css/scene-category.css}"
      href="/css/scene-category.css"
    />
    <script
      th:href="@{/js/scene-category.js}"
      src="/js/scene-category.js"
    ></script>
    <style>
      .layui-table td {
        font-size: 13px;
      }
      .layui-tree-entry {
        height: 30px !important;
      }
      .ui-layout-west {
        width: 100%;
        height: 100%;
        display: flex;
        background: rgb(240, 240, 240);
        padding: 10px 0;
      }
      .box {
        margin-left: 10px;
        width: 300px;
        height: 100%;
        background-color: #fff;
        font-size: 16px;
        min-height: calc(100vh - 66px);
        overflow: auto;
        border-radius: 5px;
      }
      .ui-layout-content {
        width: 100%;
        height: 100%;
      }
      .leftBtmbtn {
        padding: 30px;
      }
      .leftBtmbtn div {
        margin: 10px 0;
        color: #1c92ec;
      }
      .leftBtmbtn div p {
        cursor: pointer;
      }
      .layoutRightContent {
        width: calc(100% - 240px);
        height: 100%;
        margin: 0 10px;
      }
      .rightContentTop {
        width: 100%;
        height: 100%;
        /* display: flex; */
      }
      .rightContentTop .row {
        width: 100%;
        margin: 0;
        padding: 0px 8px;
      }
      .row .col-12 {
        padding: 0;
      }
      .addBtn {
        height: 50px;
        font-size: 16px;
        font-weight: 600;
        border: none;
        background-color: #fff;
        color: rgb(28, 144, 231);
      }
      */ .col-12 {
        width: 100%;
        height: 100%;
        padding: 0 15px;
      }
      .col-12 #table .detail {
        width: 0;
        border: none;
        border: #fff;
      }
      .preservation {
        width: 100%;
        height: 100px;
        text-align: center;
      }
      .preservation button {
        width: 100px;
        height: 40px;
        border: none;
        border-radius: 10px;
        color: #fff;
        background-color: rgb(28, 144, 231);
      }
      .addShebei {
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        color: rgb(123, 123, 123);
        background: rgb(242, 242, 242);
      }
      .add_class {
        width: 100%;
        height: 100%;
        padding: 0 20px;
      }
      .all_add {
        width: 100%;
        display: flex;
      }
      .add_class .aa {
        width: 100px;
        height: 35px;
        line-height: 35px;
        border-radius: 5px;
        text-align: center;
        color: white;
        background-color: #1c92ec;
        margin: 40px auto;
      }
      .shebeiLeft {
        width: 100%;
        height: 100%;
      }
      .shebeiSearch {
        width: 100%;
        height: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .shebeiSearch input {
        border: 1px solid #f5f5f5;
        background-color: #f8f8f8;
        padding: 5px;
      }
      .tianjiaTree {
        width: 100%;
        height: 300px;
        overflow: hidden;
        border: 1px solid #ccc;
      }
      .shebeiRight {
        width: 100%;
        height: 100%;
        margin-left: 20px;
      }
      .chosenText {
        width: 100%;
        height: 40px;
        text-align: center;
        line-height: 40px;
      }
      .chosen {
        width: 100%;
        height: 300px;
        border: 1px solid #ccc;
      }

      /* 设置模态框样式 */
      #demo1 {
        display: block;
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
      }
      .edit_class,
      .enter_class,
      .enterGroup_class {
        width: 100%;
        height: 100%;
      }
      .edit_title,
      .enter_title,
      .enterGroup_title {
        padding: 0 20px;
        width: 100%;
        height: 30px;
        line-height: 30px;
        background-color: #f2f2f2;
        color: #a6a6a6;
      }
      .edit_iptbox,
      .enter_iptbox,
      .enterGroup_iptbox {
        padding: 0 20px;
        width: 100%;
        margin: 10px 0;
      }
      .reTitle {
        margin: 5px 0;
      }
      .oneIstrue {
        flex: 30%;
        background-color: pink;
      }
      .btn_sure {
        width: 100px;
        height: 35px;
        line-height: 35px;
        border-radius: 5px;
        text-align: center;
        color: white;
        background-color: #1c92ec;
        margin: 20px auto;
      }
      /* 左侧作业区 */
      .ui-layout-west .box-main {
        width: 230px;
        height: 100%;
      }
      #tree1 {
        height: 500px;
        overflow: auto;
        margin-top: 15px;
        margin-left: 15px;
      }
      /* 左侧作业区 */

      #tableData .layui-table-header .layui-table .layui-table {
        width: 100% !important;
      }
      /* 工作区表格样式 */
      .layui-table tbody tr,
      .layui-table thead tr {
        height: 40px;
      }
      .layui-table thead tr {
        background-color: #ecf1f2;
      }
      .layui-table thead tr th {
        font-weight: 700 !important;
        font-size: 16px !important;
      }
      .layui-table-body .layui-btn-sm {
        width: 70px;
      }
      .addbtn {
        height: 30px !important;
        background-color: #72d7c0;
      }
      .fa-plus {
        margin-right: 3px;
      }
      .setbtn {
        background-color: #85baee;
      }
      .delbtn {
        background-color: #f58c90;
      }
      .shebeibianhao .layui-btn-xs {
        width: 96px;
        margin-top: 20px;
        margin-left: 25px;
      }
      .layui-layer-shade {
        z-index: 0 !important;
      }
      /* 左侧树形修改 */
      #tree1 .layui-tree-iconClick .layui-icon {
        font-size: 12px;
        position: absolute;
        top: -1px;
        left: -1px;
      }
      #tree1 .layui-tree-icon,
      .layui-tree-iconClick {
        position: relative;
        margin-right: 20px;
      }
      #tree1 .layui-icon-subtraction:after {
        position: absolute;
        top: -1px;
        left: 15px;
        content: "";
        width: 14px;
        height: 13px;
        background-image: url("/ajax/libs/jquery-ztree/3.5/css/metro/img/metro.png");
        background-position: -151px -25px;
      }
      #tree1 .layui-icon-addition:after {
        position: absolute;
        top: -1px;
        left: 15px;
        content: "";
        width: 14px;
        height: 13px;
        background-image: url("/ajax/libs/jquery-ztree/3.5/css/metro/img/metro.png");
        background-position: -151px -4px;
      }
      #tree1 .layui-icon-file:before {
        content: "";
        position: absolute;
        top: 4px;
        left: 2px;
        content: "";
        width: 14px;
        height: 13px;
        background-image: url("http://localhost:8002/ajax/libs/jquery-ztree/3.5/css/metro/img/metro.png");
        background-position: -151px -47px;
      }
      .demo-side .layui-icon-file:before {
        content: none !important;
      }
      .demo-side .layui-icon-layer:before {
        content: none !important;
      }
      .demo-side {
        margin: 10px 0;
      }
      .layui-tree-entry {
        height: 25px !important;
      }
      .layui-tree-txt {
        font-size: 13px;
      }
      .layui-form-item {
        display: flex;
        width: 94%;
      }
      .labelDian {
        flex: 1;
      }
      .reTitless {
        margin-right: 5px;
        flex: 2;
      }
      .layui-form-label {
        width: 100px;
      }
      .layui-form-item .layui-input-inline {
        width: 500px;
      }
      .btn-success {
        background-color: #1c84c6 !important;
        color: #fff !important;
        height: 30px !important;
      }
      .searchTop {
        height: 60px !important;
      }
      .newAddListItem {
        width: 100%;
        background: #fff;
        position: relative;
        margin: 0px !important;
      }
      .toolbar {
        height: 30px;
        padding-top: 20px;
      }
      .toolbar .addBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        width: 61px;
        background-color: #1c84c6;
        border-radius: 3px;
      }
      .toolbar .newAddListItem {
        width: 100%;
        height: 35px;
        background: #fff;
        line-height: 35px;
        position: relative;
      }
      .chakan {
        color: #fff;
        background-color: #009688;
      }
      .success {
        background-color: #1c84c6;
        color: #fff;
      }
      .layui-table-cell {
          min-height: 30px;
          height: initial;
      }
      .layui-table-cell, .layui-table-tool-panel li {
        white-space: initial;
        /*为了让字母和数字也换行*/
        word-break: break-word;
      }
    </style>
  </head>
  <body>
    <div class="ui-layout-west">
      <div class="box box-main">
        <div class="ui-layout-content">
          <div id="tree1"></div>
        </div>
        <div class="leftBtmbtn">
          <!-- <div>
            <p class="luruArea" id="enterGroupItem">录入场景区</p>
          </div> -->
          <!-- <div>
            <p class="setArea">设置区域组</p>
          </div> -->
        </div>
      </div>
      <!-- 录入区弹层 -->
      <form action="" id="luruSelect">
        <div
          class="enterGroup_class"
          id="enterGroup_class"
          style="display: none"
        >
          <div class="enterGroup_title">数据点信息</div>
          <div class="enterGroup_iptbox">
            <div class="reTitle">
              <span>场景名称</span>
            </div>
            <div class="inp">
              <input
                type="text"
                class="form-control categoryName"
                placeholder="请输入名称"
                maxlength="30"
              />
            </div>
          </div>
          <div class="enterGroup_iptbox">
            <div>当前场景名称</div>
            <div class="inp">
              <div class="selectSpan form-control">请选择上级区域</div>
              <!-- <div id="selectData" style="display: none"></div> -->
            </div>
          </div>
          <div
            id="enterGroup_sure"
            class="btn_sure enterGroupBtn"
            lay-submit
            lay-filter="formLuruSelect"
          >
            <i class="fa fa-check"></i>保存
          </div>
        </div>
      </form>


      <!------------------------- 设置区域弹出层 start -->
      <div class="enterGroup_class" id="setArea" style="display: none">
        <div class="enterGroup_title">修改场景名称</div>
        <div class="enterGroup_iptbox">
          <div class="reTitle">
            <span>场景名称</span>
          </div>
          <div class="inp">
            <input
              type="text"
              class="form-control setDataName"
              placeholder="请输入名称"
              maxlength="30"
            />
          </div>
        </div>
        <div class="enterGroup_iptbox">
          <div>所属场景名称</div>
          <div class="inp">
            <div class="setSpan form-control"></div>
          </div>
        </div>
        <div style="text-align: center">
          <div
            id="setAreaBtn"
            class="btn_sure enterGroupBtn"
            lay-submit
            lay-filter="formLuruSelect"
          >
            <i class="fa fa-check"></i>保存
          </div>
        </div>
      </div>

      <div class="layoutRightContent">
        <div class="rightContentTop">
          <div class="searchTop">
            <div class="newAddListItem">
              <!-- <div class="add"></div> -->
              <div class="btn-group-sm toolbar" role="group">
                <button class="addBtn btn btn-success" id="changjingPop">
                  <i class="fa fa-plus"></i>新增
                </button>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="demo-side col-12">
              <table frame="void" id="demo"></table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加设备弹框-->
    <div class="wrapperBox" data-type="rt" style="display: none">
      <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <div class="addShebei">
          <span>设备信息</span>
        </div>
        <form class="layui-form" id="layform" action="">
          <select
            class="selectData"
            lay-filter="batch"
            id="batch"
            lay-verify="required"
          ></select>
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button
                type="submit"
                class="layui-btn btn btn-sm btn-primary"
                lay-submit=""
                lay-filter="demo1"
              >
                <i class="fa fa-check"></i>
                立即提交
              </button>
              <button type="reset" class="layui-btn layui-btn-primary">
                <i class="fa fa-refresh"></i>

                重置
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!-- 新增场景名称弹窗 -->
    <form action="" id="form-add" style="margin: 0 auto">
      <div class="enterGroup_class" id="newchangjingPop" style="display: none">
        <div class="enterGroup_title">场景名称信息</div>
        <!-- <div class="layui-form-item">
          <label class="layui-form-label">场景名称</label>
          <div class="layui-input-inline">
            <input
              type="text"
              class="form-control changjingName"
              placeholder="请输入场景名称"
              maxlength="30"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">上级场景名称</label>
          <div class="layui-input-inline">
            <input
              type="text"
              class="form-control superiorChangjing"
              disabled
              maxlength="30"
            />
          </div>
        </div> -->
        <div class="enterGroup_iptbox">
          <div class="reTitle">
            <span>场景名称</span>
          </div>
          <div class="inp">
            <input
              type="text"
              class="form-control changjingName"
              placeholder="请输入名称"
              maxlength="30"
            />
          </div>
        </div>
        <div class="enterGroup_iptbox">
          <div>上级场景名称</div>
          <div class="inp">
            <input
              type="text"
              class="form-control superiorChangjing"
              disabled
              maxlength="30"
            />
          </div>
        </div>

        <div style="text-align: center">
          <button
            id="enterGroup"
            class="btn_sure enterGroupBtn"
            lay-submit
            lay-filter="formDemo"
          >
            <i class="fa fa-check"></i>
            保存
          </button>
        </div>
      </div>
    </form>

    <!-- 新增弹框 -->
    <!-- <div class="wrapperBox1" style="display: none;"> -->
    <form action="" id="form-add">
      <div class="enterGroup_class" id="newAreaShow" style="display: none">
        <div class="enterGroup_title">监测点信息</div>
        <div class="layui-form-item">
          <label class="layui-form-label">监测点名称</label>
          <div class="layui-input-inline">
            <select
              name="pointId"
              lay-verify=""
              class="reTitle layui-form form-control selectClick"
              id="selset-form"
            >
              <option value="" class="selectData">请选择</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">上限值</label>
          <div class="layui-input-inline">
            <input
              type="text"
              class="form-control"
              disabled
              maxlength="30"
              name="upperLimit"
              id="upperLimit"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">下限值</label>
          <div class="layui-input-inline">
            <input
              type="text"
              class="form-control"
              disabled
              maxlength="30"
              name="lowerLimit"
              id="lowerLimit"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label labelDian">安装点位</label>
          <select
            name="pointId"
            lay-verify=""
            class="reTitless layui-form form-control"
            id="selset-formOne"
          >
            <option value="" class="selectData">请选择</option>
          </select>
          <select
            name="pointId"
            lay-verify=""
            class="reTitless layui-form form-control"
            id="selset-formTwo"
          >
            <option value="" class="selectData">请选择</option>
          </select>
          <select
            name="pointId"
            lay-verify=""
            class="reTitless layui-form form-control"
            id="selset-formThree"
          >
            <option value="" class="selectData">请选择</option>
          </select>
          <select
            name="pointId"
            lay-verify=""
            class="reTitless layui-form form-control"
            id="selset-formFour"
          >
            <option value="" class="selectData">请选择</option>
          </select>
          <select
            name="pointId"
            lay-verify=""
            class="reTitless layui-form form-control"
            id="selset-formFive"
          >
            <option value="" class="selectData">请选择</option>
          </select>
        </div>
        <div style="text-align: center">
          <button
            id="jiancedianPop"
            class="btn_sure enterGroupBtn"
            lay-submit
            lay-filter="formDemo"
          >
            <i class="fa fa-check"></i>
            保存
          </button>
        </div>
      </div>
    </form>

    <!-- 采集点位修改按钮弹窗 -->
    <form action="">
      <div
        class="enterGroup_class"
        id="porintSet"
        style="display: none"
      >
        <div class="enterGroup_title">数据点信息</div>
        <div class="enterGroup_iptbox">
          <div class="reTitle">
            <span>监测点名称</span>
          </div>
          <div class="inp">
            <input
              type="text"
              class="form-control porintName"
              placeholder="请输入名称"
              maxlength="30"
            />
          </div>
        </div>
        <div class="enterGroup_iptbox">
          <div>当前监测点名称</div>
          <div class="inp">
            <div class="porintValue form-control"></div>
            <!-- <div id="selectData" style="display: none"></div> -->
          </div>
        </div>
        <div
          id="enterGroup_sure"
          class="btn_sure PorintBtn"
          lay-submit
          lay-filter="formLuruSelect"
        >
          <i class="fa fa-check"></i>保存
        </div>
      </div>
    </form>

    <!-- table表格弹出层 -->
    <div class="enterGroup_class" id="demotable" style="display: none">
      <div class="newAddListItem">
        <div class="btn-group-sm toolbar" id="toolbar" role="group">
          <button class="addBtn btn btn-success" id="addBTN">
            <i class="fa fa-plus"></i>新增
          </button>
        </div>
      </div>
      <div>
        <table id="tableData" lay-filter="test"></table>
        <div id="pages" style="margin-left: 30%"></div>
      </div>
    </div>
    <!-- </div> -->
    <script type="text/html" id="tableDataBtn">
      <a class="layui-btn success layui-btn-xs" lay-event="pointAdd"
        ><i class="fa fa-edit"></i>编辑</a
      >
      <a class="layui-btn danger layui-btn-xs" id="tableDataDel" lay-event="pointDel"
        ><i class="fa fa-remove"></i>删除</a
      >
    </script>

    <!-- 表格操作列 -->
    <script type="text/html" id="tbBar">
      <a
        class="layui-btn layui-btn-primary layui-btn-xs chakan"
        lay-event="detail"
        ><i class="fa fa-search"></i>查看详情</a
      >
      <a
        class="layui-btn success layui-btn-primary layui-btn-xs"
        lay-event="add"
        ><i class="fa fa-plus"></i>新增</a
      >
      <a
        class="layui-btn success layui-btn-primary layui-btn-xs"
        lay-event="edit"
        ><i class="fa fa-edit"></i>编辑</a
      >
      <a class="layui-btn danger layui-btn-danger layui-btn-xs" lay-event="del"
        ><i class="fa fa-remove"></i>删除</a
      >
    </script>
  </body>
</html>
